<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>修改课程信息</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>

		<body>
			<div class="layui-fluid">
				<div class="layui-row">
					<form class="layui-form" enctype="multipart/form-data" id="app">
						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>课程名称</label>
							<div class="layui-input-inline">
								<input type="text" :value="cour.courseName" id="courseName" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            	<span class="x-red">*</span>专业分类
                        	</label>
							<div class="layui-input-inline">
								<select id="parentId" class="valid" lay-filter="parentId" v-model="selected">
									<option v-for="sub in sys" :value="sub.subjectId">{{ sub.subjectName }}</option>
								</select>
								<select id="subjectId" name="subjectId" class="valid" lay-filter="subjectId">
								</select>
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>状态
                        </label>
							<div class="layui-input-inline">
								<select id="isAvaliable" class="valid">
									<option value="1">上架</option>
									<option value="2">下架</option>
								</select>
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>总课时</label>
							<div class="layui-input-inline">
								<input type="number" id="lessionNum" min=0 :value="cour.lessionNum" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>课程原价</label>
							<div class="layui-input-inline">
								<input type="number" min=0 :value="cour.sourcePrice" id="sourcePrice" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>课程售价</label>
							<div class="layui-input-inline">
								<input type="number" min=0 :value="cour.currentPrice" id="currentPrice" lay-verify="required" autocomplete="off" class="layui-input" placeholder="为0表示免费">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>有效结束日期</label>
							<div class="layui-input-inline">
								<input type="text" :value="cour.endTime" id="endTime" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>添加教师</label>
							<div class="layui-input-inline">
								<table id="tb">
									<tr v-for="t in tea">
										<td style="display: none;">{{ t.id }}</td>
										<td>{{ t.name }}</td>
										<td>
											<a href='#' onclick='del(this)'>删除</a>
										</td>
									</tr>
								</table><br />
								<a href="#" @click="check_tea()">选择教师</a>
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>销售数量</label>
							<div class="layui-input-inline">
								<input type="number" min=0 :value="cour.pageBuycount" id="pageBuycount" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>浏览量</label>
							<div class="layui-input-inline">
								<input type="number" min=0 :value="cour.pageViewcount" id="pageViewcount" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                            <span class="x-red">*</span>课程简介</label>
							<div class="layui-input-inline">
								<input type="text" :value="cour.title" id="title" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>

						<!--图片名-->
						<!--<input id="fileName" type="text" lay-verify="fileName" autocomplete="off" class="layui-input" disabled>-->
						<!--隐藏输入框 用来存放上传后图片路径-->
						<input id="credential_hide" name="credentialOne" type="text" lay-verify="credentialOne" autocomplete="off" class="layui-input">
						<!--隐藏按钮 上传-->
						<button id="upload_img" type="button" hidden></button>
						<button class="layui-btn" id="preview_img" type="button">
						上传图片
					</button>
						<!--折叠面板-->
						<div class="layui-collapse" lay-accordion="" style="width: 399.5px">
							<div class="layui-colla-item">
								<h2 class="layui-colla-title">展开图片</h2>
								<div class="layui-colla-content" id="colla_img" style="">
								</div>
							</div>
						</div>

						<div class="layui-form-item layui-form-text">
							<label for="desc" class="layui-form-label">课程详情</label>
							<div class="layui-form-item layui-form-text">
								<textarea id="demo" name="testContent" class="layui-textarea" lay-verify="content">{{ cour.context }}</textarea>
							</div>
						</div>

						<div class="layui-form-item">
							<label for="L_repass" class="layui-form-label"></label>
							<button class="layui-btn" id="add" type="button">提交修改</button>
						</div>
					</form>
				</div>
			</div>

			</form>
			</div>
			</div>
			<script type="text/javascript" src="./js/jquery.min.js"></script>
			<!--引入Vue的js 开发环境版本., 包含了有帮助的命令行警告-->
			<script src="./js/vue.min.js"></script>
			<script type="text/javascript" src="js/vue.js"></script>
			<script src="js/axios.min.js"></script>
			<script type="text/javascript" src="js/jquery.cookie.js"></script>
			<script>
				//删除选中但是不符合数据
				function del(obj) {
					var tr = obj.parentNode.parentNode;
					var tbody = tr.parentNode;
					tbody.removeChild(tr);
				}
				
				//Vue
				const app = new Vue({
					el: "#app",
					data: {
						cour: '',
						sys: [],
						tea: [],
						checkParent: '',
						selected: ''
					},
					methods: {
						//跳转至教师选择页面
						check_tea() {
							xadmin.open('选择教师', 'course_teacher.html');
						},
						allchange(obj) {
							var cId = this.cour.subjectId;
							$.ajax({
								type: 'get',
								url: "http://localhost:9095/admin/sysSubject/selectParentId",
								data: {
									"subjectId": obj
								},
								dataType: 'json',
								success: function(e) {
									//empty() 方法从被选元素移除所有内容
									$("select[name='subjectId']").empty();
									var html = "";
									$(e.data).each(function(v, k) {
										if(k.subjectId == cId) {
											html += "<option value='" + k.subjectId + "' selected>" + k.subjectName + "</option>";
										} else {
											html += "<option value='" + k.subjectId + "'>" + k.subjectName + "</option>";
										}
									});
									//把遍历的数据放到select表里面
									$("select[name='subjectId']").append(html);
								}
							});
						},
						loading(){
							var typeHtml = '';
							var id = $.cookie("courseId");
							let _this = this;
							//获取需要修改的课程表数据
							$.ajax({
								type: "get",
								url: "http://localhost:9095/admin/eduCourse/getById",
								async: true,
								data: {
									"courseId": id
								},
								success: function(res) {
									console.log(res)
									_this.cour = res.data[0];
									_this.tea = res.data[1];
									_this.sys = res.data[2];
									//将当前课程图片回显
									$('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="' + res.data[0].logo + '" width="370px"></a>');
									//图片路径存放
									$("#credential_hide").val(res.data[0].logo);
									//状态下拉框定位
									$("#isAvaliable").find("option[value="+res.data[0].isAvaliable+"]").prop("selected",true);
									//获取所有专业父节点信息
									var par = res.data[2];
									//循环所有专业父节点,并给下拉框动态赋值
									$.each(par,function(index,item){
							        	//option  第一个参数是页面显示的值，第二个参数是传递到后台的值
							        	$('#parentId').append(new Option(item.subjectName,item.subjectId));//往下拉菜单里添加元素
							       });
									_this.selected=res.data[0].subjectLink
									_this.allchange(res.data[0].subjectLink);
									form.render();
								}
							});
						}
					},
					created() {
						this.loading();
					}
				})

				layui.use(['form', 'layer', 'laydate', 'upload', 'element', 'layedit'],
					function() {
						$ = layui.jquery;
						var form = layui.form,
							layer = layui.layer,
							laydate = layui.laydate,
							element = layui.element,
							upload = layui.upload,
							layedit = layui.layedit;
							var index = layedit.build('demo');

						//						下拉框二级联动
						form.on("select(parentId)", function(data) {
							var areaId = data.elem.value;
							$.ajax({
								type: 'get',
								url: "http://localhost:9095/admin/sysSubject/selectParentId",
								data: {
									"subjectId": areaId
								},
								dataType: 'json',
								success: function(e) {
									//empty() 方法从被选元素移除所有内容
									$("select[name='subjectId']").empty();
									var html = "";
									$(e.data).each(function(v, k) {
										html += "<option value='" + k.subjectId + "'>" + k.subjectName + "</option>";
									});
									//把遍历的数据放到select表里面
									$("select[name='subjectId']").append(html);
									//从新刷新了一下下拉框
									form.render('select'); //重新渲染
								}
							});
						});

						/*上传图片*/
						upload.render({
							elem: '#preview_img',
							url: 'http://localhost:9095/admin/eduCourse/saveImg',
							size: 1024,
							auto: true, //自动上传。即选中就课时上传图片
							bindAction: '#upload_img', //上传绑定到隐藏按钮
							done: function(res) {
								console.log(res)
								$('#credential_hide').val(res.data.name); //隐藏输入框赋值
							},
							error: function(index, upload) {
								layer.msg('上传失败！' + index, {
									icon: 5
								});
							},
							before: function(obj) { //上传成功后回调函数, 用来回显图片
								obj.preview(function(index, file, result) {
									$('#colla_img').find('img').remove();
									$('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="' + result + '" width="370px"></a>');
								})
							}
						});

						//						监听提交
						$(document).on('click', "#add",
							function(data) {
								layedit.sync(index);
								axios.defaults.headers.common["token2"] = $.cookie("token2");
								var id = $.cookie("courseId");
								//单击隐藏的上传按钮
								var tid = '';
								$("#tb").find("tr").each(function() {　　
									//第二列单元格的值eq(索引)
									tid += $(this).children('td:eq(0)').text() + ",";
								});
								if($("#parentId option:selected").val() == -1 || $("#parentId option:selected").val() == undefined) {
									layer.msg('请选择专业!');
									return;
								}
								if(tid == '') {
									layer.msg('请为课程添加教师!');
									return;
								}
								if($("#currentPrice").val() > $("#sourcePrice").val()) {
									layer.msg("售价大于原价？？不合理吧？");
									return;
								}
								if($("#demo").val() == '') {
									layer.msg("请填写课程详情！");
									return;
								}
								var eduCourseDto = new URLSearchParams();
								eduCourseDto.append("courseId", id);
								eduCourseDto.append("courseName", $("#courseName").val());
								eduCourseDto.append("isAvaliable", $("#isAvaliable option:selected").val());
								eduCourseDto.append("subjectLink", $("#parentId option:selected").val())
								eduCourseDto.append("subjectId", $("#subjectId option:selected").val());
								eduCourseDto.append("sourcePrice", $("#sourcePrice").val());
								eduCourseDto.append("currentPrice", $("#currentPrice").val());
								eduCourseDto.append("title", $("#title").val());
								eduCourseDto.append("context", $("#demo").val());
								eduCourseDto.append("lessionNum", $("#lessionNum").val());
								eduCourseDto.append("pageBuycount", $("#pageBuycount").val());
								eduCourseDto.append("pageViewcount", $("#pageViewcount").val());
								eduCourseDto.append("endTime", $("#endTime").val());
								eduCourseDto.append("logo", $("#credential_hide").val());
								eduCourseDto.append("tid", tid)
								console.log("文本域：" + $("#demo").val());
								axios({
									method: "post",
									url: "http://localhost:9095/admin/eduCourse/updateEduCourse",
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									params: eduCourseDto
								}).then(function(response) {
									if(response.data.code == 200) {
										layer.msg(response.data.message, {
												icon: 1,
												time: 1000
											});
										location.href = "course_show.html";
									} else if (response.data.code == 10101){
										layer.msg(response.data.message, {
												icon: 1,
												time: 1000
											});
											return false;
									}else {
										alert("修改失败！");
									}
								})
							});

						laydate.render({
							elem: '#endTime',
							type: 'datetime',
							min: minDate()
						});

						// 设置可选日期
						function minDate() {
							var now = new Date();
							return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
						}
					});

			</script>
			<script>
				var _hmt = _hmt || [];
				(function() {
					var hm = document.createElement("script");
					hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
					var s = document.getElementsByTagName("script")[0];
					s.parentNode.insertBefore(hm, s);
				})();
			</script>
		</body>

</html>